<template>
  <view class="wrap">
    <image src="../../static/homeBg.png" class="homeBg"></image>
    <z-paging ref="paging">
      <template #top>
        <view class="pox" :style="`height: calc(35px + ${statusBarHeight} + 110rpx)`">
          <status-bar></status-bar>
          <view class="head-nav" :style="{top: statusBarHeight}">
            <template v-if="userInfo">
              <avatar :src='setUrl(userInfo.avatar)' styles='width: 72rpx; height: 72rpx;border: 1px solid #FFF;margin-right: 30rpx' @click="goUser"></avatar>
            </template>
            <view class="search" @click="goSearch">
              <uv-input v-model="search" placeholder="请输入内容" readonly border='none' prefixIcon='search' prefixIconStyle='color: #E43222;font-size: 48rpx;' placeholderStyle='font-size: 24rpx;color: #9C9C9C;font-weight: 400;' :customStyle="{backgroundColor: '#FFF', height: '72rpx', paddingLeft: '18rpx'}"></uv-input>
            </view>
          </view>
          <view class="tab">
            <uv-tabs :list="tabList" :current='current' :scrollable='false' itemStyle='height: 90rpx' lineWidth='0' lineHeight='0' activeStyle='font-weight: 500; font-size: 26rpx; color: rgba(255, 255, 255, 1);' inactiveStyle='font-weight: 400; font-size: 26rpx; color: rgba(255, 255, 255, 0.66);' @click="tabClick"></uv-tabs>
          </view>
        </view>
      </template>
      <template v-if="current == 0">
        <recommend ref="recom"></recommend>
      </template>
      <template v-if="current == 1">
        <publics></publics>
      </template>
      <template v-if="current == 2">
        <teacher ref="teach"></teacher>
      </template>
      <template #bottom>
        <tabbar :current='2'></tabbar>
      </template>
    </z-paging>
    
  </view>
</template>

<script setup>
import recommend from '../../components/lesearch/recommend/index.vue';
import teacher from '../../components/lesearch/teacher.vue';
import publics from '../../components/lesearch/public.vue';
import { ref, computed } from 'vue';
import { get } from '@/api';
import { setUrl } from '@/common';
import { useUser } from '@/store';
// import { onShow, onHide } from '@dcloudio/uni-app';

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
const userInfo = computed(() => {
  const store = useUser();
  return store.userInfo;
});
const teach = ref(null);
const recom = ref(null);
const tabList = [
  {name: '推荐'},
  {name: '公开课'},
  {name: '名师课'}
]
let current = ref(0);
let search = ref('');

// let isPage = false;

// onShow(() => {
//   if(isPage){
//     if(current.value == 0){
//       recom.value.init();
//     }else if(current.value == 2){
//       teach.value.getList();
//     }
//   }
// })
// onHide(() => {
//   isPage = true;
// })
function tabClick({ index }){
  current.value = index;
}
function goSearch(){
  uni.navigateTo({
    url: '/pages/index/search?type=3'
  });
}
function goUser(){
  uni.navigateTo({
  	url: '/pages/mine/index'
  });
}
</script>

<style lang="scss" scoped>
  .pox{
    position: relative;
    z-index: 2;
    .tab{
      padding: 0 100rpx;
    }
    .head-nav{
      width: 100%;
      // position: fixed;
      // left: 0;
      // top: var(--status-bar-height);
      padding: 0 30rpx;
      padding-top: 20rpx;
      display: flex;
      align-items: center;
      .search{
        overflow: hidden;
        border-radius: 100rpx;
        flex: 1;
      }
    }
  }
  .homeBg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
</style>